<template>
<div class="bg-white">
    <div class="container">
        <div class="clearfix mgb-60">
            <div class="fl blueshop-left">
                <div class="blueshop-left-top">
                    <p class="blueshop-left-title">绿色商户</p>
                    <div class="blueshop-left-search clearfix">
                        <p class="fl">绿色星级</p>
                        <ul class="blueshop-left-search-list clearfix fl">
                            <li @click="searchcur=0" :class="{active:searchcur==0}">不限</li>
                            <li @click="searchcur=1" :class="{active:searchcur==1}">二星</li>
                            <li @click="searchcur=2" :class="{active:searchcur==2}">三星</li>
                            <li @click="searchcur=3" :class="{active:searchcur==3}">四星</li>
                            <li @click="searchcur=4" :class="{active:searchcur==4}">五星</li>
                        </ul>
                    </div>
                    <div class="blueshop-left-search clearfix">
                        <p class="fl">选择地区</p>
                        <ul class="blueshop-left-search-list clearfix fl">
                            <li @click="searchcur2=0" :class="{active:searchcur2==0}">不限</li>
                            <li @click="searchcur2=1" :class="{active:searchcur2==1}">江苏</li>
                            <li @click="searchcur2=2" :class="{active:searchcur2==2}">上海</li>
                            <li @click="searchcur2=3" :class="{active:searchcur2==3}">北京</li>
                            <li @click="searchcur2=4" :class="{active:searchcur2==4}">广州</li>
                            <li v-for="(item,index) in provincelist" :key="index">{{item.name}}</li>
                        </ul>
                        <p class="fr col-gray pointer" @click="getProvince()"><i class="el-icon-arrow-down"></i></p>
                    </div>
                    <div class="blueshop-left-search clearfix">
                        <p class="fl">所属行业</p>
                        <ul class="blueshop-left-search-list clearfix fl">
                            <li @click="searchcur3=0" :class="{active:searchcur3==0}">不限</li>
                            <li @click="searchcur3=1" :class="{active:searchcur3==1}">安装工程</li>
                            <li @click="searchcur3=2" :class="{active:searchcur3==2}">安装工程</li>
                            <li @click="searchcur3=3" :class="{active:searchcur3==3}">安装工程</li>
                            <li @click="searchcur3=4" :class="{active:searchcur3==4}">安装工程</li>
                        </ul>
                    </div>
                    <div class="blueshop-left-search clearfix">
                        <p class="fl">是否认证</p>
                        <ul class="blueshop-left-search-list clearfix fl">
                            <li @click="searchcur4=0" :class="{active:searchcur4==0}">全部</li>
                            <li @click="searchcur4=1" :class="{active:searchcur4==1}">是</li>
                            <li @click="searchcur4=2" :class="{active:searchcur4==2}">否</li>
                        </ul>
                    </div>
                </div>
                <div class="blueshop-left-bottom">
                    <ul class="blueshop-left-bottom-list">
                        <li v-for="(item,index) in blueshop" :key="index" @click="toShoppagelist(item)">
                          <a href="javascript:void(0);">
                            <div class="clearfix">
                                <!-- <img src="../../../static/images/img/lvcainew.jpg" alt="" class="fl logo"> -->
                                <img :src="item.logo" alt="" class="fl logo">
                                <div class="fl detail">
                                    <p class="name">{{item.title}}</p>
                                    <p class="business">主营业务：{{item.main_business}}</p>
                                    <p class="type">经营类型：{{item.business_info}}</p>
                                </div>
                                <div class="level fl"><i class="el-icon-star-on" v-for="index in item.rate" :key="index"></i></div>
                                <!-- <img src="../../../static/images/img/lvcainew.jpg" alt="" class="fl blueauth">
                                <img src="../../../static/images/img/lvcainew.jpg" alt="" class="fl outauth"> -->
                                <ul class="fl authlist">
                                    <li v-for="(item,index) in item.certification_info" :key="index" v-if="index<3">
                                        <img :src="item.logo" alt="">
                                        <p>{{item.title}}</p>
                                    </li>
                                </ul>
                            </div>
                          </a>
                        </li>
                    </ul>
                    <!-- 用于挂载goodsDetail二级商品详情页面 -->
                    <router-view></router-view>
                </div>
            </div>
            <div class="fr blueshop-right">
                <router-link to="Blueshop_settle" class="blueshop-right-topbtn">入驻绿色商户</router-link>
                <img src="../../../static/images/img/lvcainew.jpg" alt="" class="blueshop-right-img">
                <div class="blueshop-right-recommend">
                    <p class="title">绿色商户推荐</p>
                    <ul class="blueshop-right-recommend-list">
                        <li v-for="(item,index) in blueRightshoplist" :key="index" v-if="index<6">
                            <router-link to="" class="clearfix">
                                <img :src="item.logo" alt="" class="fl">
                                <p class="fl">{{item.title}}</p>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</template>


<script>
import jquery from '../../assets/js/jquery-1.10.2.min.js'
import axios from 'axios'
export default {
  name:'Blueshop',
  prop:{
    'id':[],
    'shoppagelist':{}
  },
  data(){
      return{
          searchcur:0,
          searchcur2:0,
          searchcur3:0,
          searchcur4:0,
          blueshop:[],
          blueRightshoplist:[],
          provincelist:[],
        //   getProvince:false,
          // getword:'',
          showdetailList:[],
          brandFold: true,
          items:[]
      }
  },
  computed: {
   showdedtailList : {
      get: function () {
        if (this.brandFold) {
          debugger;
          if (this.items.length < 50) {
            return this.items
          }
          let newArr = []
          for (var i = 0; i < 5; i++) {
            let item = this.items[i]
            newArr.push(item)
          }
          return newArr
        }
        return this.items
      },
      set: function (val) {
        this.showdetailList = val
      }
    }
},
  methods:{
    //   点击更多显示省市区 
    getProvince () {
      debugger;
      var that=this
      axios.get('/district/province')
      .then(function(res){
        res = res.data
        that.items = res.response;
        // that.getword == '收起'
      })
    },
    // 绿色商户-左侧列表
    getBlueshop () {
      debugger;
      var that=this
      axios.get('/merchant/list')
      .then(function(res){
        res = res.data
        that.blueshop = res.response;
      })
    },
    // 右侧推荐商户   正式环境 position_id 3
    getBlueRightshoplist () {
      var that=this
      axios.get('/merchant/ofPosition')
      .then(function(res){
        res = res.data
        that.blueRightshoplist = res.response.merchants
      })
    },
    // 点击商户进入详情
    // toShoppagelist(id) {
    //   debugger;
    //   console.log(id)
    //   this.$router.push({
    //     path:'/Blueshoppage/${id}',
    //     // query: {goodsList: goodsList}
    //     // 解决传过来的参数值在刷新页面后丢失
    //     query: {id: JSON.stringify(id)}
    //   })
    // },
    toShoppagelist(item) {
      debugger;
      console.log(item)
      this.$router.push({
          name: 'Blueshoppage', params: {shoppagelist: JSON.stringify(item)}}
          //path:'/Blueshoppage/${item.id}',
        // query: {goodsList: goodsList}
        // 解决传过来的参数值在刷新页面后丢失
        //query: {shoppagelist: JSON.stringify(item)}
        // name:'Blueshoppage',
        // query: {id: id}

        // query: {goodsList: goodsList}
        // 解决传过来的参数值在刷新页面后丢失
        // query: {id: JSON.stringify(id)}
      )
    },
    changeFoldState() {
        this.brandFold = !this.brandFold
}
  },
  created:function () {
    this.getBlueRightshoplist();
    this.getBlueshop();
    this.getProvince();
    this.$emit('public_header', false);
    this.$emit('public_headerhover', true);
    this.$emit('public_footer', true);
  },
}
</script>

<style>
 @import '../../../static/style/blueshop';
</style>
